<template>
	<div id="app">
		<div class="content">
			<!--首页外卖-->
			<div class="on">
				<section class="msite">
					<!--首页头部-->
					<HeaderTop :title="address.name">
						<template slot="left">
							<router-link to="/search" class="header_search">
								<i class="iconfont icon-sousuo"></i>
							</router-link>
						</template>
					</HeaderTop>
					<!--首页导航-->
					<nav class="msite_nav">
						<div class="swiper-container" v-if="categoryise.length" style="overflow: hidden;">
							<div class="swiper-wrapper">
								<div class="swiper-slide" v-for="(arrObj,index) in categoryise" :key="index">
									<a href="javascript:" class="link_to_food" v-for="(item,index) in arrObj" :key="index">
										<div class="food_container">
											<img v-lazy="'https://fuss10.elemecdn.com/' + item.image_url">
										</div>
										<span>{{item.title}}</span>
									</a>
								</div>
							</div>
							<!-- Add Pagination -->
							<div class="swiper-pagination"></div>
						</div>
						<img v-lazy="'./images/msite_back.svg'" v-else alt="back">
					</nav>
					<!--首页附近商家-->
					<shopList>
					</shopList>
				</section>
			</div>
		</div>
	</div>
</template>

<style lang="stylus">
	#app .content>div>section.msite {
		width: 100%;
	}

	#app .content>div>section.msite .header_search {
		position: absolute;
		left: 15px;
		top: 50%;
		transform: translateY(-50%);
		width: 10%;
		height: 50%;
	}

	#app .content>div>section.msite .header_search .icon-sousuo {
		font-size: 25px;
		color: #fff;
	}

	#app .content>div>section.msite .header_login {
		font-size: 14px;
		color: #fff;
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
	}

	#app .content>div>section.msite .msite_header .header_login .header_login_text {
		color: #fff;
	}

	#app .content>div>section.msite .msite_nav {
		position: relative;
		margin-top: 45px;
		height: 200px;
		background: #fff;
	}

	#app .content>div>section.msite .msite_nav::before {
		content: '';
		position: absolute;
		z-index: 200;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		background-color: #e4e4e4;
		transform: scaleY(0.5);
	}

	#app .content>div>section.msite .msite_nav .swiper-container {
		width: 100%;
		height: 100%;
	}

	#app .content>div>section.msite .msite_nav .swiper-container .swiper-wrapper {
		width: 100%;
		height: 100%;
	}

	#app .content>div>section.msite .msite_nav .swiper-container .swiper-wrapper .swiper-slide {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-wrap: wrap;
	}

	#app .content>div>section.msite .msite_nav .swiper-container .swiper-wrapper .swiper-slide .link_to_food {
		width: 25%;
	}

	#app .content>div>section.msite .msite_nav .swiper-container .swiper-wrapper .swiper-slide .link_to_food .food_container {
		display: block;
		width: 100%;
		text-align: center;
		padding-bottom: 10px;
		font-size: 0;
	}

	#app .content>div>section.msite .msite_nav .swiper-container .swiper-wrapper .swiper-slide .link_to_food .food_container img {
		display: inline-block;
		width: 50px;
		height: 50px;
	}

	#app .content>div>section.msite .msite_nav .swiper-container .swiper-wrapper .swiper-slide .link_to_food span {
		display: block;
		width: 100%;
		text-align: center;
		font-size: 13px;
		color: #666;
	}

	#app .content>div>section.msite .msite_nav .swiper-container .swiper-pagination>span.swiper-pagination-bullet-active {
		background: #02a774;
	}
</style>

<script>
	import Swiper from 'swiper'
	import 'swiper/dist/css/swiper.min.css'
import { nextTick } from 'vue'
	import {mapState} from 'vuex'
	import HeaderTop from '../../components/headerTop/index.vue'
	import shopList from '../../components/shopList/index.vue'
	export default {
		name: 'Msite',
		components: {
			HeaderTop,
			shopList
		},
		computed:{
			...mapState(['address','categorys']),
			// 转换,把16个对象一组拆分为8个对象为一组
			categoryise(){
					// 最终返回的数组 
					let resArr = []
					// 临时存储的数组
					let minArr = []
					this.categorys.forEach(obj =>{
					if(minArr.length === 8){
						minArr = []
					}
					if(minArr.length === 0){
						resArr.push(minArr)
					}
					minArr.push(obj)
					// console.log(resArr)
					})
					return resArr
				// slice写法
				// let num = 8
				// for(let i = 0,j = this.categorys.length;i < j; i+=num){
				// 	console.log(i)
				// 	newArr.push(this.categorys.slice(i,i + num))
				// 	console.log(i)
				// }
			}
		},
		created(){
			this.$store.dispatch('SETADDRESS',{
				longitude:'113.3123526',
				latitude:'22.8202681'
			})
			this.$store.dispatch('SETCATEGORY')
		},
		updated(){
			this.$nextTick(()=>{
				// 创建一个Swiper实例对象, 来实现轮播
				new Swiper('.swiper-container', {
					loop: true, // 循环模式选项
					// 如果需要分页器
					pagination: {
						el: '.swiper-pagination',
					},
				})
			})
		}
	}
</script>
